<script setup lang="ts">
const _slot = useSlots()
const fullscreen = ref(false)
function toggleScreen() {
  fullscreen.value = !fullscreen.value
}
</script>

<template>
  <ElDialog
    v-bind="$attrs"
    append-to-body
    draggable
    :fullscreen="fullscreen"
  >
    <template v-for="(item, index) in _slot" :key="index">
      <component :is="item" />
    </template>
    <template #header>
      <div class="flex justify-between items-center">
        <span>{{ $attrs.title }}</span>
        <ElIcon color="#000" style="cursor: pointer;" @click="toggleScreen">
          <FullScreen />
        </ElIcon>
      </div>
    </template>
  </ElDialog>
</template>
